iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Modern Web

前端蛇行撞牆記系列 第 17

Day17 前端蛇行撞牆記 - 在github上架設個人網站

  • 分享至 

  • xImage
  •  

前言

看完上一篇在github設定SSH key之後,現在可以來試著上傳自己的專案到github上了!

通常我們都是在本地端把專案弄得差不多了才上傳到github上,
所以這次會使用git remote add ~直接連結本地專案到github的repo上。


準備工作

本地:

  • 記得在開啟一個本地專案的時候要先git init,才能讓git追蹤這個檔案。
  • 確定SSH key有連結到github上
    • 在terminal輸入 ssh -T git@github.com來確認是否有連結成功。
      • 失敗的話去~/.ssh/config資料夾確認Host那格是不是長這樣Host github.com

github:

  • 在github上新增一個repository。

在右邊頭貼按下去會有一個 your repository 選項

點進去之後點擊最右邊的New

再來要來設定repository的名稱。
這裡很重要是因為我們要用免費的,所以要選擇public

完成之後再回到your repository就會看到新增的repository了。

到這邊的準備工作都差不多了!接下來我們就要讓本地的專案要連結到剛建立好的github的repository。

本地與github的連結

接下來繼續在github上,我們要把這個repository的SSH key clone複製起來。
(這個就是原本要把github的東西拿下來的git clone後面接的。)

然後我們回到本地專案,在這個地方輸入:

% git remote add origin git@github.com:Jadddxx/sing-a-song.git

正常是什麼也不會回傳給你的,git就會默默把這個github上的repo跟這個專案結合。
不然我們可以使用這個來看看他有沒有被加入。

% git remote -v

連結成功之後,我們就可以把本地的東西都做好基本的add, commit做完之後push看看了!

第一次push東西要用:
讓他可以推到連結的repo上

% git push -u origin master

這樣就是推成功了!

網站

推上去網站的網址會在哪裡呢?再回到我們repo裡面,按下最右邊的setting,左邊會有一個Pages

最上面就是我們的網站拉~

如果沒有的話可能是建成private了或是刪掉再重新試試看。

然後如果有些圖片的路徑什麼都正確可是一直沒跑出來的話,就等等吧,有時候真的會很久才改到XD確認code都沒問題的話就等他吧!

結論

會想寫這篇主要是每次在推網站上github都會發生SSH key的問題,但是後來我重新去~/.ssh/config修改Host之後就好了。

所以如果發生這種問題再回去看我上一篇文章,Host有沒有寫成 git@github.com,才有辦法連結。

改完之後再試一次ssh -T git@github.com來確認,這裡如果連成功就沒問題了!

祝大家順利推自己的網站上去喔~

明天見拉~


參考資料:GitHub Error Message - Permission denied (publickey)
GitHub pages 讓網站免費上線
使用 SSH 金鑰與 GitHub 連線
添加远程库
[Git] git remote add origin 中 origin 的意思解析


上一篇
Day16 前端蛇行撞牆記 - 替github, gitlab設定不同SSH key
下一篇
Day18 前端蛇行撞牆記 - volta刪除已下載node版本的方法
系列文
前端蛇行撞牆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言